<!DOCTYPE html>
<html>
<#include "_inc/constants.ftl" />
<head>
    <title></title>
    <!-- For-Mobile-Apps-and-Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Fortune Estates Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, SmartPhone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design"/>
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="css/ken-burns.css" type="text/css" media="all"/>
    <!--//pop-up-box -->
    <!-- web-fonts -->
    <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic'
          rel='stylesheet' type='text/css'>
    <!-- //web-fonts -->
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <style>
        body {
            width: 100%;
            margin: 0 auto;
        }

        p {
            margin: 0 0 0;
        }

        h1 {
            margin: 0 0 0;
        }

        .price1 {
            font-size: .9em;
            margin-right: 6px;
        }

        .shoppingTab {
            display: -webkit-box;
            display: -webkit-flex;
            z-index: 500;
            bottom: 53px;
            position: fixed;
            left: 0px;
            width: 100%;
            _position: absolute;
            _bottom: auto;
            _top: expression(eval(document.documentElement.scrollTop+440));
        }

        .shoppingCar {
            display: -webkit-box;
            display: -webkit-flex;
            z-index: 500;
            bottom: 93px;
            position: fixed;
            left: 0px;
            width: 100%;
            _position: absolute;
            _bottom: auto;
            _top: expression(eval(document.documentElement.scrollTop+440));
            background-color: white;
        }

        .name {
            font-size: 45px;
        }

        .enname {
            font-size: 42px;
            font-family: '黑体';
        }

        .justify {
            justify-content: center;
        }

        .align {
            align-items: center;
        }

        /*媒体查询：注意and后面空格的添加*/
        /*iphone: w < 768px*/

        @media screen and (max-width: 375px) {
            body {
                width: 100%;
            }

            .name {
                font-size: 16px;
                font-family: "微软雅黑";
            }

            .enname {
                font-size: 12px;
                font-family: '黑体';
            }

            .cprice {
                margin-top: 3px;
                font-size: 14px;
            }
        }

        @media screen and (max-width: 425px) and (min-width: 376px) {
            body {
                width: 100%;
            }

            .name {
                font-size: 21px;
            }

            .enname {
                font-size: 17px;
                font-family: '黑体';
            }

            .cprice {
                margin-top: 6px;
                font-size: 19px;
            }
        }

        @media screen and (max-width: 597px) and (min-width: 426px) {
            body {
                width: 100%;
            }

            .name {
                font-size: 25px;
            }

            .enname {
                font-size: 22px;
                font-family: '黑体';
            }

            .cprice {
                margin-top: 9px;
                font-size: 24px;
            }
        }

        @media screen and (max-width: 768px) and (min-width: 597px) {
            body {
                width: 100%;
            }

            .name {
                font-size: 30px;
            }

            .enname {
                font-size: 27px;
                font-family: '黑体';
            }

            .cprice {
                margin-top: 12px;
                font-size: 29px;
            }
        }

        /*pad: w >= 768  && w< 992*/

        @media screen and (max-width: 992px) and (min-width: 767px) {
            body {
                width: 100%;
            }

            .name {
                font-size: 35px;
            }

            .enname {
                font-size: 32px;
                font-family: '黑体';
            }

            .cprice {
                margin-top: 15px;
                font-size: 34px;
            }
        }

        /*中等屏幕   w >= 992  && w<1200*/

        @media screen and (max-width: 1200px) and (min-width: 992px) {
            body {
                width: 100%;
            }

            .name {
                font-size: 40px;
            }

            .enname {
                font-size: 37px;
                font-family: '黑体';
            }

            .cprice {
                margin-top: 18px;
                font-size: 39px;
            }
        }
    </style>

</head>

<body class="bg" style="background-color: #f1f1f1;">
<div class="agile-main">
    <div class="content-wrap">
        <div class="content" style="padding-left: 20px;padding-right: 20px;margin-top: 20px;">

            <div class="banner">
                <div id="kb" class="carousel kb_elastic animate_text kb_wrapper" data-ride="carousel"
                     data-interval="6000" data-pause="hover">
                    <!-- Wrapper-for-Slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="images/1.jpg" width="100%" height="auto" alt="First slide">
                        </div>
                        <div class="item">
                            <img src="images/1.jpg" width="100%" height="auto" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="images/1.jpg" width="100%" height="auto" alt="Third slide">
                        </div>
                    </div>
                    <!-- Left-Button -->
                    <a class="left carousel-control kb_control_left" href="#kb" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <!-- Right-Button -->
                    <a class="right carousel-control kb_control_right" href="#kb" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <div style="margin-top: 30px;">

                <div id="menuBottom" style="height: 100px;"></div>
            </div>
        </div>

        <div class="shoppingCar" style="display: none;">
            <div style="width: 100%;">
                <div class="toolbar">
                    <div class="toolbar-inner">
                        <a id='clear' class="picker-button close-popup">清空</a>
                        <h1 class="title">我的购物车</h1>
                    </div>
                </div>
                <div>
                    <div id="content" style="overflow-y:scroll; overflow-x:scroll;height: 130px;">
                        <div id="black" style="height: 30px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="shoppingTab" style="background-color: white; display: none;">
            <div class="weui-flex" style="width: 100%;height: 40px;">
                <div class="weui-flex__item" style="position: relative;top: -1.9em;">
                    <a id="carLogo" href="#tab1" class="weui-tabbar__item">
                        <span id="totalcountshow" class="weui-badge"
                              style="position: relative;top: -1.9em;left: 5.54em;">0</span>
                        <img src="images/sss.png" width="64" height="64" alt="">
                    </a>
                </div>
                <div class="weui-flex__item weui-flex__item weui-flex justify align">共￥<span
                        id="totalpriceshow">0</span></div>
                <div class="weui-flex__item weui-flex__item weui-flex justify align">
                    <button id="pay" type="button" class="btn btn-warning btn-sm">去结算</button>
                </div>
            </div>
        </div>
        <div class="weui-tabbar" style="background-color: #fc8689;">
            <a class="weui-tabbar__item weui-bar__item--on">
                <div class="weui-tabbar__icon">
                    <img id="main" src="images/cup.png" alt="">
                </div>
                <p class="weui-tabbar__label">单品</p>
            </a>
            <a class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <img src="images/meal.png" alt="">
                </div>
                <p class="weui-tabbar__label">套餐</p>
            </a>
            <a class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <img id="my" src="images/my.png" alt="">
                </div>
                <p class="weui-tabbar__label">我</p>
            </a>
        </div>
    </div>
</div>

<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/jquery.fly.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="js/utils.js"></script>
<script>
    $(document).ready(function () {
        FastClick.attach(document.body);
        //加载缓存
        load();

        if ($(".price1").length >= 1) {
            $(".shoppingTab").show();
        }

        var param = {};
        param.accesstoken = '${accesstoken}';
        param.machserial = '${mach}';
        $.ajax({
            type: 'POST',
            url: '${url}/menu/intmenu.do',
            cache: false,
            dataType: 'json',
            data: param,
            success: function (result) {
                if (result.success == false) {
                    console.log(result);
                    window.location.href = '/index.do?mach=1';
                } else {
                    if (result.code == 0) {
                        var json = JSON.parse(result.body);
                        var list = json.list;
                        if (json.total != 0) {
                            for (var i = 0; i < list.length; i++) {
                                $('#menuBottom').before(function () {
                                    var div = '<div class="weui-flex" style="background-color: white; margin-top: 10px;">' +
                                            '<div class="weui-flex__item">' +
                                            '<div class="placeholder">' +
                                            '<img src="images/tea.png" width="100%" height="100%"/>' +
                                            '</div>' +
                                            '</div>' +
                                            '<div class="weui-flex__item weui-flex justify align">' +
                                            '<div>' +
                                            '<p class="name">' + list[i].productname + '</p>' +
                                            '<p class="enname">' + list[i].enname + '</p>' +
                                            '<p style="color: #fc8689" class="cprice">￥' + priceUtil.Price.toPriceString(list[i].cprice * 1) + '</p>' +
                                            '</div>' +
                                            '</div>' +
                                            '<div class="weui-flex__item">' +
                                            '<div class="placeholder" style="padding-left:10px;padding-right:10px;height:100%;">' +
                                            '<div style="height: 60%;"></div>' +
                                            '<input type="hidden" value="' + list[i].pid + '"/>' +
                                            '<input type="hidden" value="' + list[i].price + '"/>' +
                                            '<button type="button" style="background-color: #fc8689; border-color: #fc8689" class="btn btn-warning btn-block addcar">来一杯</button>' +
                                            '</div>' +
                                            '</div>' +
                                            '</div>';
                                    return div;
                                });
                            }
                        }
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('连接错误');
            }
        });


        $("body").on("click", ".addcar", function (event) {
            var addcar = $(this);
            var scrollTop = $(document).scrollTop();
            var offset = $("#carLogo").offset();

            var flyer = $('<img src="images/circular.png" />');
            flyer.fly({
                start: {
                    left: addcar.offset().left + addcar.width() / 2,
                    top: addcar.offset().top - scrollTop
                },
                end: {
                    left: offset.left + 20,
                    top: offset.top + 10,
                    width: 0,
                    height: 0
                },
                onEnd: function () {
                    this.destory();
                    $(".shoppingTab").show();
                    var pid = addcar.prev().prev("input").val();
                    var price = addcar.prev().val();
                    try {
                        $('.price1').each(function () {
                            var val = $(this).prev().prev().prev().val();
                            if (val == pid) {
                                var $priceInput = $(this).next().find('.weui-count__number');
                                var num = parseInt($priceInput.val() || "0");
                                var cprice = $(this).text() * 1 + $("#totalpriceshow").html() * 1;
                                var nm = $("#totalcountshow").html();
                                $priceInput.val(num + 1);
                                $("#totalpriceshow").html(cprice.toFixed(2));
                                $("#totalcountshow").html(nm * 1 + 1);
                                throw "";
                            }
                        });
                    } catch (e) {
                        writecache();
                        return;
                    }
                    var name = addcar.parent().parent().prev().find(".name").html();
                    var enname = addcar.parent().parent().prev().find(".name").next().html();
                    var cprice = addcar.parent().parent().prev().find(".cprice").html().substring(1);
                    console.log(cprice);
                    $('#black').before(function () {
                        var div = '<div class="weui-cell">' +
                                '<div class="weui-cell__bd">' +
                                '<div class="weui-cell">' +
                                '<div class="weui-cell__bd">' +
                                '<p class="carname">' + name + '</p>' +
                                '<input class="carenname" type="hidden" value="' + enname + '" />' +
                                '</div>' +
                                '<div class="weui-cell__ft">' +
                                '<input type="hidden" value="' + pid + '" />' +
                                '<input type="hidden" value="' + price + '" />' +
                                '<span>￥</span><span class="price1">' + cprice + '</span>' +
                                '<div class="weui-count">' +
                                '<a class="weui-count__btn weui-count__decrease"></a>' +
                                '<input class="weui-count__number" type="number" readonly="readonly" value="1" />' +
                                '<a class="weui-count__btn weui-count__increase"></a>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '<div class="weui-cell__ft">' +
                                '<img class="delete" src="images/delete.png" />' +
                                '</div>' +
                                '</div>';
                        return div;
                    });
                    cprice = cprice * 1 + $("#totalpriceshow").html() * 1;
                    console.log(cprice);
                    var nm = $("#totalcountshow").html();
                    $("#totalpriceshow").html(cprice.toFixed(2));
                    $("#totalcountshow").html(nm * 1 + 1);
                    writecache();
                }
            });
        });

        $('#carLogo').click(function () {
            $(".shoppingCar").toggle();
        });

        var cprice = 0;
        var count = 0;
        var num = 0;
        $('.price1').each(function () {
            num = parseInt($(this).next().find('.weui-count__number').val() || "0");
            cprice += $(this).text() * num;
            count += num;
        });
        $("#totalpriceshow").html(cprice.toFixed(2));
        $("#totalcountshow").html(count);
    });

    var MAX = 99,
            MIN = 1;

    //减
    $("body").on("click", ".weui-count__decrease", function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") - 1;
        if (number < MIN) {
            number = MIN;
        } else {
            var danjia = $(this).parent().prev('.price1').text(); //获取单价
            var a = $("#totalpriceshow").html(); //获取当前所选总价
            $("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2)); //计算当前所选总价
            var nm = $("#totalcountshow").html(); //获取数量
            $("#totalcountshow").html(nm * 1 - 1);
        }
        $input.val(number);
        writecache();
    });
    //加
    $("body").on("click", ".weui-count__increase", function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") + 1;
        if (number > MAX) number = MAX;
        $input.val(number);
        var danjia = $(this).parent().prev('.price1').text(); //获取单价
        var a = $("#totalpriceshow").html(); //获取当前所选总价
        $("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2)); //计算当前所选总价
        var nm = $("#totalcountshow").html(); //获取数量
        $("#totalcountshow").html(nm * 1 + 1);
        writecache();
    });

    //删除
    $("body").on("click", ".delete", function () {
        var danjia = $(this).parent().prev().children().children(".weui-cell__ft").children(".price1").text();
        var num = $(this).parent().prev().children().children(".weui-cell__ft").children(".weui-count").children("input").val() * 1;
        var a = $("#totalpriceshow").html();
        var nm = $("#totalcountshow").html();

        $("#totalpriceshow").html((a - danjia * num).toFixed(2));
        $("#totalcountshow").html(nm * 1 - num);
        $(this).parent().parent().remove();
        if ($(".price1").length < 1) {
            $(".shoppingCar").hide();
            $(".shoppingTab").hide();
        }
        writecache();
    });

    //清空购物车
    $('#clear').click(function () {
        $(".weui-cell").remove();
        $("#totalcountshow").html("0");
        $("#totalpriceshow").html("0.00");
        $(".shoppingCar").hide();
        $(".shoppingTab").hide();
        writecache();
    });

    //写入缓存cache
    function writecache() {
        var content = "";
        $(".price" + "1").each(function (index) {
            var num = parseInt($(this).next().find('.weui-count__number').val() || "0");
            var cprice = $(this).text();
            var price = $(this).prev().prev().val();
            var pid = $(this).prev().prev().prev().val();
            var name = $(this).parent().prev().children('.carname').html();
            var enname = $(this).parent().prev().children('.carenname').val();
            if (index == $(".price1").length - 1) {
                content += '{"name":"' + name + '","num":"' + num + '","pid":"' + pid + '","cprice":"' + cprice + '","price":"' + price + '","enname":"' + enname + '"}';
            } else {
                content += '{"name":"' + name + '","num":"' + num + '","pid":"' + pid + '","cprice":"' + cprice + '","price":"' + price + '","enname":"' + enname + '"},';
            }
        });
        var json = '{"list":[' + content + ']}';
        localStorage.setItem("list${mach}", json);
    }

    //当页面加载完的时候给window加载监听器

    window.addEventListener("pagehide", myUnloadHandler, false);

    function myUnloadHandler(evt) {
        var content = "";
        $('.price1').each(function (index) {
            var num = parseInt($(this).next().find('.weui-count__number').val() || "0");
            var cprice = $(this).text();
            var price = $(this).prev().prev().val();
            var pid = $(this).prev().prev().prev().val();
            var name = $(this).parent().prev().children('.carname').html();
            var enname = $(this).parent().prev().children('.carenname').val();
            if (index == $(".price1").length - 1) {
                content += '{"name":"' + name + '","num":"' + num + '","pid":"' + pid + '","cprice":"' + cprice + '","price":"' + price + '","enname":"' + enname + '"}';
            } else {
                content += '{"name":"' + name + '","num":"' + num + '","pid":"' + pid + '","cprice":"' + cprice + '","price":"' + price + '","enname":"' + enname + '"},';
            }
        });
        var json = '{"list":[' + content + ']}';
        localStorage.setItem("list${mach}", json);
    }

    //获取缓存
    function load() {
        var storage = JSON.parse(localStorage.getItem("list${mach}"));
        console.log(storage);
        if (storage == null) {
            return;
        }

        var list = storage.list;
        console.log(list);
        if (list.length == 0) {
            return;
        }
        for (var i = 0; i < list.length; i++) {
            $('#black').before(function () {
                var div = '<div class="weui-cell">' +
                        '<div class="weui-cell__bd">' +
                        '<div class="weui-cell">' +
                        '<div class="weui-cell__bd">' +
                        '<p class="carname">' + list[i].name + '</p>' +
                        '<input class="carenname" type="hidden" value="' + list[i].enname + '" />' +
                        '</div>' +
                        '<div class="weui-cell__ft">' +
                        '<input type="hidden" value="' + list[i].pid + '" />' +
                        '<input type="hidden" value="' + list[i].price + '" />' +
                        '<span>￥</span><span class="price1">' + list[i].cprice + '</span>' +
                        '<div class="weui-count">' +
                        '<a class="weui-count__btn weui-count__decrease"></a>' +
                        '<input class="weui-count__number" type="number" value="' + list[i].num + '" />' +
                        '<a class="weui-count__btn weui-count__increase"></a>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="weui-cell__ft">' +
                        '<img class="delete" src="images/delete.png" />' +
                        '</div>' +
                        '</div>';
                return div;
            });
        }
    }

    $("#main").on("click", function () {
        var param = {};
        param.accesstoken = '${accesstoken}';
        $.submitFormPost('/weixin.do', param, 'POST');
    });

    $("#my").on("click", function () {
        var param = {};
        param.accesstoken = '${accesstoken}';
        $.submitFormPost('/my.do', param, 'POST');
    });

    $("#pay").on("click", function () {
        var param = {};
        param.accesstoken = '${accesstoken}';
        param.mach = '${mach}';
        $.submitFormPost('/paypage.do', param, 'POST');
    });


</script>
</body>
</html>